<template xmlns="http://www.w3.org/1999/html">
  <div class="content has-text-centered">
    <!--标题区域-->
    <strong class="company is-bold">中科软科技产品应用事业部
      <h1 class="department">技能水平鉴定系统</h1>
    </strong>

    <!-- access_token -->
    <div class="columns token_cont">
      <div class="column is-4 is-offset-4">
        <div class="box">
          <div v-show="true" style="color:red; word-wrap:break-word;">{{ error }}</div>
          <form class="from-content" v-on:submit.prevent="login">
            <label class="label">请输入您的访问凭据</label>
            <input v-model="data.access_token" class="input token_input" type="text" placeholder="访问凭证由HR发放">
            <hr>
            <p class="control auth">
              <button type="submit" class="button is-primary">鉴权</button>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        // 授权凭证
        data: {
          access_token: ''
        },
        // 错误信息提示
        error: null
      }
    },
    mounted () {
      if (this.$auth.redirect()) {
        console.log('Redirect from: ' + this.$auth.redirect().from.name)
      }
    },
    methods: {
      /**
       * 登录调用方法
       */
      login () {
        // 获取重定向地址，授权后跳转地址
        let redirect = this.$auth.redirect()
        this.$auth.login({
          headers: {
            'Content-Type': 'application/json'
          },
          data: this.data.body,
          rememberMe: this.data.rememberMe,
          redirect: {name: redirect ? redirect.from.name : 'Home'},
          success (res) {
            console.log('Auth Success', res)
          },
          error (err) {
            if (err.response) {
              this.error = err.response.data
            } else {
              console.log('Error', err.message)
            }
            console.log(err.config)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .company {
    font-size: large;
  }
  .token_cont {
    margin-top: 50px;
  }
  .from-content {
    margin: 20px 20px;
  }
  .auth {
    text-align: center;
  }
  .token_input {
    margin-top: 30px;
  }
  .department {
    margin-top: 5px;
    font-size: medium;
  }
</style>
